<template>
  <view class="forum-detail-page">
    <scroll-view
      class="forum-detail-scroll"
      :scroll-y="true"
      style="height: 100vh"
    >
      <ForumCard
        :info="detail"
        :likeAvatars="detail.likeAvatars"
        :showExpandBtn="false"
      />
      <CommentList :comments="comments" />
    </scroll-view>
    <CommentInput @submit="onCommentSubmit" />
  </view>
</template>

<script>
  import ForumCard from './components/ForumCard.vue'
  import CommentList from './components/CommentList.vue'
  import CommentInput from './components/CommentInput.vue'
  export default {
    components: { ForumCard, CommentList, CommentInput },
    data() {
      return {
        detail: {
          user: {
            avatar: '',
            nickname: '小可爱',
            signature: '生活不止眼前的美好，还有诗和远方'
          },
          title: '饮茶养生亦养心',
          content:
            '惊蛰节气后，阳气上升，气温回暖，雨水增多，正是饮茶养生的好时节。茶能清心明目，润喉生津，助于身心健康。',
          images: [{ url: '' }, { url: '' }, { url: '' }],
          shareCount: 853,
          commentCount: 309,
          likeCount: 2992,
          likeAvatars: ['', '', '', '']
        },
        comments: [
          {
            id: 1,
            user: { avatar: '', name: '喝茶小白', role: 'author' },
            date: '04-30',
            content: '这些照片是在中国拍的哦下次再风险给你们大家哈。',
            likeCount: 223,
            liked: false,
            commentCount: 12,
            replies: [
              {
                id: 11,
                user: { avatar: '', name: '张三', role: '' },
                date: '04-30',
                content: '这些照片是在中国拍的哦下次再风险给你们大家哈。',
                likeCount: 223,
                liked: false,
                replyTo: null
              },
              {
                id: 12,
                user: { avatar: '', name: '冯宝宝', role: '' },
                date: '04-30',
                content:
                  '回复张三：这些照片是在中国拍的哦下次再风险给你们大家哈。',
                likeCount: 223,
                liked: false,
                replyTo: '张三'
              }
            ]
          },
          {
            id: 2,
            user: { avatar: '', name: '喝茶小白', role: 'first' },
            date: '04-30',
            content: '这些照片是在中国拍的哦下次再风险给你们大家哈。',
            likeCount: 223,
            liked: false,
            commentCount: 1,
            replies: []
          },
          {
            id: 3,
            user: { avatar: '', name: '喝茶小白', role: '' },
            date: '04-30',
            content: '这也太好了了',
            likeCount: 223,
            liked: false,
            commentCount: 1,
            replies: []
          }
        ]
      }
    },
    methods: {
      onCommentSubmit(content) {
        // 这里只做mock追加
        this.comments.push({
          id: Date.now(),
          user: { avatar: '', name: '新用户', role: '' },
          date: '06-09',
          content,
          likeCount: 0,
          liked: false,
          commentCount: 0,
          replies: []
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .forum-detail-page {
    background: #f8f8f8;
    min-height: 100vh;
  }
  .forum-detail-scroll {
    height: 100vh;
    overflow: auto;
    padding-bottom: 120rpx;
  }
</style>
